<template>

    <el-dialog id="imgDialog" title="识别照片" :visible.sync="isImgDialog" width="96%" top="40px" :close-on-click-modal="false">
        <el-popover placement="bottom-start" width="830" style="margin: 0 0 5px .5%;box-shadow: 0 0 8px rgba(0,0,0,.5);" trigger="click">
            <el-form :inline="true" label-width="75px" class="demo-ruleForm">
                <el-form-item label="浆员卡号" style="margin-bottom: 0;"><el-input style="width: 100px;"></el-input></el-form-item>
                <el-form-item label="浆员姓名" style="margin-bottom: 0;"><el-input style="width: 100px;"></el-input></el-form-item>
                <el-form-item label="创建时间" style="margin-bottom: 0;"><el-date-picker type="daterange" style="width: 300px;" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" align="right"></el-date-picker></el-form-item>
                <el-button type="primary" @click="serchImgDialogData">提交</el-button>
            </el-form>
            <el-button slot="reference" type="primary">查询</el-button>
        </el-popover>

        <ul class="grid-items" :style="imgDialogHeight">
          <li>
              <div class="grid-content">
                  <div class="photo"><img src="http://60.164.210.223:7575/customUI/factCustomUI/SoftFanUIDownload?backerId=%25E7%2599%25BB%25E8%25AE%25B0%25E6%259F%25A5%25E7%259C%258B%25E8%25AF%2586%25E5%2588%25AB%25E7%2585%25A7%25E7%2589%2587&uniqueRelationName=&field=jyph_SfMedia&rowNum=21&dd=1551944139185&id=factForm:main:ajaxpreview_1_jyph_SfMedia" alt=""></div>
                  <div class="photo"><img src="http://60.164.210.223:7575/customUI/factCustomUI/SoftFanUIDownload?backerId=%25E7%2599%25BB%25E8%25AE%25B0%25E6%259F%25A5%25E7%259C%258B%25E8%25AF%2586%25E5%2588%25AB%25E7%2585%25A7%25E7%2589%2587&uniqueRelationName=&field=photo&rowNum=21&dd=1551944139185&id=factForm:main:ajaxpreview_1_photo_SfMedia" alt=""></div>
                  <div class="basic">
                      <h5>201563</h5>
                      <p>时间：2019年01月28日 08:48:44</p>
                      <p>证照：0.0</p>
                      <p>照片：0.51975024</p>
                  </div>
              </div>
          </li>
          <li>
              <div class="grid-content">
                  <div class="photo"><img src="http://60.164.210.223:7575/customUI/factCustomUI/SoftFanUIDownload?backerId=%25E7%2599%25BB%25E8%25AE%25B0%25E6%259F%25A5%25E7%259C%258B%25E8%25AF%2586%25E5%2588%25AB%25E7%2585%25A7%25E7%2589%2587&uniqueRelationName=&field=jyph_SfMedia&rowNum=21&dd=1551944139185&id=factForm:main:ajaxpreview_1_jyph_SfMedia" alt=""></div>
                  <div class="photo"><img src="http://60.164.210.223:7575/customUI/factCustomUI/SoftFanUIDownload?backerId=%25E7%2599%25BB%25E8%25AE%25B0%25E6%259F%25A5%25E7%259C%258B%25E8%25AF%2586%25E5%2588%25AB%25E7%2585%25A7%25E7%2589%2587&uniqueRelationName=&field=photo&rowNum=21&dd=1551944139185&id=factForm:main:ajaxpreview_1_photo_SfMedia" alt=""></div>
                  <div class="basic">
                      <h5>201563</h5>
                      <p>时间：2019年01月28日 08:48:44</p>
                      <p>证照：0.0</p>
                      <p>照片：0.51975024</p>
                  </div>
              </div>
          </li>
          <li>
              <div class="grid-content">
                  <div class="photo"><img src="http://60.164.210.223:7575/customUI/factCustomUI/SoftFanUIDownload?backerId=%25E7%2599%25BB%25E8%25AE%25B0%25E6%259F%25A5%25E7%259C%258B%25E8%25AF%2586%25E5%2588%25AB%25E7%2585%25A7%25E7%2589%2587&uniqueRelationName=&field=jyph_SfMedia&rowNum=21&dd=1551944139185&id=factForm:main:ajaxpreview_1_jyph_SfMedia" alt=""></div>
                  <div class="photo"><img src="http://60.164.210.223:7575/customUI/factCustomUI/SoftFanUIDownload?backerId=%25E7%2599%25BB%25E8%25AE%25B0%25E6%259F%25A5%25E7%259C%258B%25E8%25AF%2586%25E5%2588%25AB%25E7%2585%25A7%25E7%2589%2587&uniqueRelationName=&field=photo&rowNum=21&dd=1551944139185&id=factForm:main:ajaxpreview_1_photo_SfMedia" alt=""></div>
                  <div class="basic">
                      <h5>201563</h5>
                      <p>时间：2019年01月28日 08:48:44</p>
                      <p>证照：0.0</p>
                      <p>照片：0.51975024</p>
                  </div>
              </div>
          </li>
          <li>
              <div class="grid-content">
                  <div class="photo"><img src="http://60.164.210.223:7575/customUI/factCustomUI/SoftFanUIDownload?backerId=%25E7%2599%25BB%25E8%25AE%25B0%25E6%259F%25A5%25E7%259C%258B%25E8%25AF%2586%25E5%2588%25AB%25E7%2585%25A7%25E7%2589%2587&uniqueRelationName=&field=jyph_SfMedia&rowNum=21&dd=1551944139185&id=factForm:main:ajaxpreview_1_jyph_SfMedia" alt=""></div>
                  <div class="photo"><img src="http://60.164.210.223:7575/customUI/factCustomUI/SoftFanUIDownload?backerId=%25E7%2599%25BB%25E8%25AE%25B0%25E6%259F%25A5%25E7%259C%258B%25E8%25AF%2586%25E5%2588%25AB%25E7%2585%25A7%25E7%2589%2587&uniqueRelationName=&field=photo&rowNum=21&dd=1551944139185&id=factForm:main:ajaxpreview_1_photo_SfMedia" alt=""></div>
                  <div class="basic">
                      <h5>201563</h5>
                      <p>时间：2019年01月28日 08:48:44</p>
                      <p>证照：0.0</p>
                      <p>照片：0.51975024</p>
                  </div>
              </div>
          </li>
          <li>
              <div class="grid-content">
                  <div class="photo"><img src="http://60.164.210.223:7575/customUI/factCustomUI/SoftFanUIDownload?backerId=%25E7%2599%25BB%25E8%25AE%25B0%25E6%259F%25A5%25E7%259C%258B%25E8%25AF%2586%25E5%2588%25AB%25E7%2585%25A7%25E7%2589%2587&uniqueRelationName=&field=jyph_SfMedia&rowNum=21&dd=1551944139185&id=factForm:main:ajaxpreview_1_jyph_SfMedia" alt=""></div>
                  <div class="photo"><img src="http://60.164.210.223:7575/customUI/factCustomUI/SoftFanUIDownload?backerId=%25E7%2599%25BB%25E8%25AE%25B0%25E6%259F%25A5%25E7%259C%258B%25E8%25AF%2586%25E5%2588%25AB%25E7%2585%25A7%25E7%2589%2587&uniqueRelationName=&field=photo&rowNum=21&dd=1551944139185&id=factForm:main:ajaxpreview_1_photo_SfMedia" alt=""></div>
                  <div class="basic">
                      <h5>201563</h5>
                      <p>时间：2019年01月28日 08:48:44</p>
                      <p>证照：0.0</p>
                      <p>照片：0.51975024</p>
                  </div>
              </div>
          </li>
      </ul>
        <el-pagination slot="footer" background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10, 15,20, 25,30,50, 100]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="10000"></el-pagination>
    </el-dialog>

</template>

<script>
    export default {
        name: "IdentitionImg",
        props:['imgDialogData'],
        data() {
            return {
                tokenId: sessionStorage.getItem("tokenId"),
                currentPage: 1,
                pageSize: 10,
                isImgDialog: false,

                imgDialogHeight: {
                    height: document.documentElement.clientHeight - 230+ 'px',
                    overflowY: 'auto',
                },
            }
        },
        methods: {

            serchImgDialogData(){
                console.log(this.$props.imgDialogData)
            },
            handleSizeChange(size) {
                this.pagesize = size;
            },
            handleCurrentChange(currentPage) {
                this.currentPage = currentPage;
            },
        }
    }
</script>

<style scoped>
    #imgDialog .grid-items{
        width: 100%;
        overflow: hidden;
    }

    #imgDialog .grid-items > li{
        float: left;
        width: 24%;
        margin: 0 .5% 1%;
    }
    #imgDialog .grid-items > li:last-child {
        margin-bottom: 0;
    }

    #imgDialog .grid-content {
        overflow: hidden;
        padding: 5px;
        border: 1px solid #e6e6e6;
        border-radius: 4px;
    }

    #imgDialog .photo{
        width: 21%;
        float: left;
        margin: 0 1%;
    }
    #imgDialog .basic{
        width: 52%;
        float: left;
        margin: 0 1%;
    }

    #imgDialog .photo>img{
        width: 100%;
        height: 100px;
    }


</style>
